
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <h6>{{ list.names }}</h6><input type="text" v-model="list.names" @keyup.enter="addList">
  <ul>
    <li v-for="item in list.dataList" :key="item.id">{{ item.name }}-{{ item.id }}</li>
  </ul>
  <h6>合计： {{ total }}条</h6>
  <div class="hello">
    <el-button type="primary">搜索</el-button>
  </div>
</template>

<script setup>
    import { reactive, ref, computed, defineProps } from "vue";
    
    defineProps({
      msg: String
    })
    const count = ref(1);
    const list = reactive({
      dataList: [{ name: "功夫熊猫", actived: false, id: 0 }, { name: "神龙大侠", atived: false, id: 1 }],
      names: '',
    });
    let total = computed(() => list.dataList.length);
    function addList() {
      list.dataList.push({ name: `${list.names}`, actived: false, id: list.dataList.length });
      list.names = '';
    }
</script>
<style lang="less">
@import './index.less';
</style>
